/**
 * Created by YUJO on 7/7/2016.
 */
function showShipmentDetail(obj, divId) {
    $("#"+divId+"").toggle();
    $(obj).toggleClass('btn-view-detail-expanded');

    if($(obj).find(".glyphicon-menu-up").is(':hidden')){

        $(obj).find(".glyphicon-menu-down").hide();
        $(obj).find(".glyphicon-menu-up").show();
        $("#"+divId+"").parent(".oal-my-shipment-list-item").addClass("highlight-border");
    }
    else{
        $(obj).find(".glyphicon-menu-up").hide();
        $(obj).find(".glyphicon-menu-down").show();
        $("#"+divId+"").parent(".oal-my-shipment-list-item").removeClass("highlight-border");
    }
}

$(document).ready(function(){
    //Search Settings
    $(".oal-page-content-shipment-detail .oal-my-shipment-search-row .sortby").click(function(){
        $(this).toggleClass("fa-sort-amount-asc");
        $(this).toggleClass("fa-sort-amount-desc");
    })


    $(".shipment-number .shipment-item-notification").on('hidden.bs.popover', function () {
        $(this).find("b").text("");
        $(this).attr("href","homepage_notification.html");
        $(this).find(".fa-bell").toggleClass("fa-bell-o");
        $(this).find(".fa-bell").toggleClass("fa-bell");
        $(this).popover('destroy');
    })

    //Advanced Search

    $(".search-filters .search-filter-field .search-filter-input").blur(function(){
        var searchKey = $(this).val();
        $(this).val('');
        if(searchKey!=''){
            var filterItem = "<li class='search-filter-item'><span>"+searchKey+"</span><span class='glyphicon glyphicon-remove'></span></li>";
            if(!existFilterItem(searchKey)){
                $(this).parent().before(filterItem);
                bindRemoveEvt();
            }
        }
        $(this).parent().hide();

    });

    $("ul.search-filters").bind("click",function(){
        $(".search-filters .search-filter-field").show();
        $(".search-filters .search-filter-field .search-filter-input").focus();
    });
    //show detail button
    $(".glyphicon-menu-up").hide();

    //tag
    $(".add-tag").each(function(i){
        var el = $(this);
        var text_grey = el.find(".text-grey");
        var tag_input = el.find(".tag-input");
        var tag_group = el.find(".customer_tag_group");
        var customer_tag = el.find(".customer_tag");
        var fa_bookmark = el.find(".fa-bookmark-o");
        var remove_tag = el.find(".fa-remove");

        customer_tag.attr('title',customer_tag.text());
        tag_input.hide();
        remove_tag.css("opacity","0");
        text_grey.find('a').click(function(){
            tag_input.val('').show().focus();
            text_grey.hide();

        })
        tag_input.focusout(function () {
            if(tag_input.val()!=''){
                customer_tag.text(tag_input.val());
                customer_tag.attr('title',tag_input.val());
                fa_bookmark.show();
                customer_tag.show();
            }
            else{
                if(customer_tag.val()==''){
                    text_grey.show();
                    fa_bookmark.hide();
                    customer_tag.hide();
                }
                else{
                    fa_bookmark.show();
                    customer_tag.attr('title',customer_tag.text());
                    customer_tag.show();
                    text_grey.hide();
                }
            }
            tag_input.hide();
        });
        tag_input.unbind('keydown').bind('keydown', function(){
            tag_input.width(getInputWidth(tag_input.val()));
        });

        tag_group.mouseover(function(){
            if(customer_tag.text()==""){
                remove_tag.css("opacity","0").css("cursor","default");
            }else{
                remove_tag.css("opacity","1").css("cursor","pointer");
            }

        });

        tag_group.mouseout(function(){
            remove_tag.css("opacity","0");
        });

        remove_tag.click(function(){
            customer_tag.val('');
            fa_bookmark.hide();
            customer_tag.hide();
            remove_tag.css("opacity","0");
            text_grey.show();
        });


        if(customer_tag.text()!=''){

            text_grey.hide();
            fa_bookmark.show();
        }
        else{
            fa_bookmark.hide();
            text_grey.show();
        }
    })

    //
    $(".oal-my-shipment-list-item  .shipment-item-notification").popover();
    $(".oal-my-shipment-search-more").bind("click",function(){

    })
    //container event
    $("a.popover-link").each(function(i){
        var el = $(this);
        var htm_content = getContainerEvent(el.html());
        el.popover({
                html: true,
                template: '<div class="popover popover-customize" role="tooltip">' +
                '<div class="arrow"></div>' +
                '<h2 class="popover-title"></h2>' +
                '<div class="popover-content"></div>' +
                '</div>',
                content:htm_content
        })
    })


    //chat button
    $(".oal-my-shipment-list").find(".oal-my-shipment-list-item").bind("mouseover",function(){
        $(this).find(".btn-quick-chat").show();
    })
    $(".oal-my-shipment-list").find(".oal-my-shipment-list-item").bind("mouseout",function(){
        $(this).find(".btn-quick-chat").hide();
    })

    $('#etd_date_range').dateRangePicker({
        customTopBar: 'Set ETD Date Range',
        autoClose: true,
        separator: ' - ',
        format: 'DD MMM YYYY',
        language: 'auto'
    });

    $('#eta_date_range').dateRangePicker({
        customTopBar: 'Set ETA Date Range',
        autoClose: true,
        separator: ' - ',
        format: 'DD MMM YYYY',
        language: 'auto'
    });
    $(".oal-datepicker .input-group-addon").bind("click",function(evt){
        evt.stopPropagation();
        $(this).parent().find("input").focus().click();

    });
    var city = [
        {"name":"hong kong"},{"name":"shang hai"}
    ]

    $("#pol").combobox({
        data:city,
        minLength:0,
        match:'name',
        getSelected:function(item){
            var polvalue="";
            if(item.length>0){
                $.each(item,function (i) {
                    if(i>0){
                        polvalue+=','
                    }
                    polvalue += item[i].name;
                })
            }
            $("#hidden_pol").val(polvalue);
        }
    });
    $("#pod").combobox({
        data:city,
        minLength:0,
        match:'name',
        getSelected:function(item){
            var podvalue="";
            if(item.length>0){
                $.each(item,function (i) {
                    if(i>0){
                        podvalue+=', '
                    }
                    podvalue += item[i].name;
                })
            }
            $("#hidden_pod").val(podvalue);

        }
    });

    //Filter
    $('#myModal').on('hidden.bs.modal', function (e) {
        var etd= $('#etd_date_range').val();
        var eta= $('#eta_date_range').val();

        var pol= $('#hidden_pol').val();
        var pod= $('#hidden_pod').val();
        var reftag= $('#reftag').val();


        if((etd + eta + pol + pod + reftag) !='' ){
            $(".search-filters .search-filter-item").each(function(){
                if($(this).text().indexOf(':')>0){
                    $(this).remove();
                }
            });

            var filterfield = $(".search-filters .search-filter-field");

            if(etd !=''){
                var filterItem = "<li class='search-filter-item'><span>ETD: "+etd+"</span><span class='glyphicon glyphicon-remove'></span></li>";
                filterfield.before(filterItem);

            }
            if(eta !=''){
                var filterItem = "<li class='search-filter-item'><span>ETA: "+eta+"</span><span class='glyphicon glyphicon-remove'></span></li>";
                filterfield.before(filterItem);
            }

             if(pol !=''){
             var filterItem = "<li class='search-filter-item'><span>POL: "+pol+"</span><span class='glyphicon glyphicon-remove'></span></li>";
             filterfield.before(filterItem);
             }

             if(pod !=''){
             var filterItem = "<li class='search-filter-item'><span>POD: "+pod+"</span><span class='glyphicon glyphicon-remove'></span></li>";
             filterfield.before(filterItem);
             }

            if(reftag !=''){
                var filterItem = "<li class='search-filter-item'><span>Reference Tag: "+reftag+"</span><span class='glyphicon glyphicon-remove'></span></li>";
                filterfield.before(filterItem);
            }

        }

        bindRemoveEvt();
        $("#searchinput").hide();

        if($(".search-filters .search-filter-item").length > 0){
            $(".search-filters").show();

        }

    });


    $('#btnAdvancedSearch').click(function(){
        $('#myModal').modal('hide');
    });

});

function getInputWidth(text){
    var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'});
    $('body').append(sensor);
    var width = sensor.width();
    sensor.remove();

    if(width<120){
        return 120;
    }
    return width;
};


// Search Filter
function existFilterItem(itemText){
    var existFlag = false;
    $(".search-filters .search-filter-item").each(function(){
        if($(this).text() == itemText){
            existFlag = true;
        }
    });
    return existFlag;
}
function bindRemoveEvt(){
    $("ul.search-filters .search-filter-item .glyphicon-remove").click(function(){
        $(this).parent().remove();
    })
};




function getContainerEvent(obj){
    return(
    '<div class="row">'+
    '<div class="col-lg-4 container-information">'+
    '    <div class="item-title">Container Status</div>'+
    '    <div class="item-content">Loaded</div>'+
    '    <div class="item-title">Size Type</div>'+
    '    <div class="item-content">40GP</div>'+
    '    <div class="item-title">VGM Submission Status</div>'+
    '    <div class="item-content">Submitted</div>'+
    '    <div class="item-title">Tare Weight</div>'+
    '   <div class="item-content">2,270 KG | 5,003.08 LB</div>'+
    '</div>'+
    '<div class="col-lg-8 shipment-container-events">'+
    '   <ul>'+
    '        <li>'+
    '           <div class="milestone-item">'+
    '                <div class="milestone-time">'+
    '                   20 Jun<br>'+
    '                   17:55 BST'+
    '               </div>'+
    '               <div class="milestone-point">'+
    '                   <div class="point-width"></div>'+
    '                   <div class="evt-finished"></div>'+
    '                   <div class="line-finished"></div>'+
    '               </div>'+
    '               <div class="milestone-event">'+
    '                   <div class="item-title">Empty Picked up (5/5)</div>'+
    '                   <div class="item-content">@ ACFS Port Logistics Pty Ltd</div>'+
    '               </div>'+
    '          </div>'+
    '       </li>'+
    '       <li>'+
    '           <div class="milestone-item">'+
    '               <div class="milestone-time">'+
    '                   22 Jun<br>'+
    '                   17:55 BST'+
    '               </div>'+
    '           <div class="milestone-point">'+
    '               <div class="point-width"></div>'+
    '               <div class="evt-finished"></div>'+
    '               <div class="line-coming"></div>'+
    '            </div>'+
    '          <div class="milestone-event">'+
    '              <div class="item-title">Planned Arrival</div>'+
    '              <div class="item-content">@ ACFS Port Logistics Pty Ltd</div>'+
    '           </div>'+
    '       </li>'+
    '       <li>'+
    '           <div class="milestone-item">'+
    '               <div class="milestone-time">'+
    '                   23 Jun<br>'+
    '                    17:55 EST'+
    '               </div>'+
    '                <div class="milestone-point">'+
    '                   <div class="point-width"></div>'+
    '                   <div class="evt-coming"></div>'+
    '               </div>'+
    '                <div class="milestone-event">'+
    '                   <div class="item-title">Latern Returned</div>'+
    '                   <div class="item-content">@ Patrick Stevedore East Swanson</div>'+
    '               </div>'+
    '           </div>'+
    '       </li>'+
    '   </ul>'+
    '   </div>'+
    '</div>');
}



